<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>...</title>
  <script>
  </script>
 </head>
  
 <body>
<!--    ul.top>(li.parent>ul>li.child*3)*2 -->
   <ul class="top">
   	<li class="parent1">parent1
   		<ul>
   			<li class="child">child1</li>
   			<li class="child">child2</li>
   			<li class="child">child3</li>
   		</ul>
   	</li>
   	<li class="parent2">parent2
   		<ul>
   			<li class="child">child1</li>
   			<li class="child">child2</li>
   			<li class="child">child3</li>
   		</ul>
   	</li>
   </ul>
	 <script src="js/jquery-1.11.3.js"></script>
	 <script>
		//修改class为top的ul的所有直接子元素
		/*$("ul.top").children()
			.css("border","1px solid red")*/
    //修改class为top的ul的所有后代li
		$("ul.top").find("li")
			.css("border","1px solid red")
    //为class为child的li绑定单击事件
		$("li.child").on("click",function(){
			var $li=$(this);
			//选择当前元素的下一个元素/前一个元素/之前所有/之后所有/除自己之外所有
			$li.siblings()//.nextAll()//.prevAll()//.prev()//.next()
			 .css("background","pink")
		})
			
	 </script>		
 </body>
</html>
